<template>
    <div class="welcome">
      <div class="logo">
        <img @click="click2Register" src="../assets/imgs/logo.gif" alt="logo" style="width: 50%;"/>
      </div>
      <div class="login">
        <div class="login-field">
          <van-cell-group>
            <van-field
              v-model="getUserNo"
              required
              clearable
              label="用户名："
              right-icon="question-o"
              placeholder="请输入用户名"
              @click-right-icon="$toast('数字或字母组合')"></van-field>

            <van-field
              v-model="getPasswd"
              type="password"
              label="密码："
              placeholder="请输入密码"
              required></van-field>
          </van-cell-group>
        </div>
        <div class="login-btn">
          <van-button round type="primary" @click="handleBtnClick">登录</van-button>
        </div>
      </div>
      <div class="title">WELCOME TO DEAL</div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Welcome',
  data: function () {
    return {
      login: {
        userno: '15339158256',
        password: '123456'
      },
      userinfo: Object
    }
  },
  computed: {
    getUserNo: function () {
      return this.userinfo.phone
    },
    getPasswd: function () {
      return this.userinfo.password
    }
  },
  mounted: function () {
    this.getUserInfo()
  },
  activated: function () {
    this.$store.dispatch('changeTabbarState', false)
  },
  deactivated: function () {
    this.$store.dispatch('changeTabbarState', true)
  },
  methods: {
    handleBtnClick: function () {
      let user = this.userinfo
      if (this.login.userno === user.phone) {
        if (this.login.password === user.password) {
          this.$store.dispatch('changeTabbarState', true)
          this.$router.push('/arena')
          return
        }
        this.$notify({
          message: '密码错误请重试',
          duration: 1000,
          background: '#FF8800'
        })
        return
      }
      this.$notify({
        message: '账号错误请重试',
        duration: 2000,
        background: '#E91E63'
      })
    },
    click2Register: function () {
      this.$router.push('/register')
    },
    getUserInfo: function () {
      axios.get('/static/mock/user.json')
        .then(this.getUserInfoSucc)
    },
    getUserInfoSucc: function (res) {
      if (res && res.data && res.data.ret) {
        this.userinfo = res.data.data.userinfo
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .login-field >>> .van-cell-group
    margin: 0 auto
    height: 100%
    width: 76%
    line-height: 300px
    background-color: transparent
  .login-field >>> .van-hairline--top-bottom
    position: inherit
  .login-field >>> .van-cell
    height: 150px
    line-height: 150px
    background-color: transparent
  .login-field >>> .van-field__label
    text-align: left
    color: #003E3E
  .login-field >>> .van-field__control
    color: #303133
  .login-btn >>> .van-button
    margin: 0 auto
    padding: 0
    width: 128px
    height: 48px
    line-height: 48px
  .welcome
    width: 100%
    height: 100%
    position: absolute
    background-image: url("../../src/assets/imgs/background.jpg")
    background-color transparent
    background-repeat:no-repeat
    background-size:100% 100%
    background-attachment: fixed
    .logo
      height: 380px
      text-align: center
    .login
      height: 600px
      .login-field
        width: 100%
        height: 50%
        text-align: center
      .login-btn
        width: 100%
        height: 20%
        line-height: 160px
        text-align: center
    .title
      float: bottom
      margin-top: 40px
      margin-bottom: 4px
      height: 80px
      line-height: 80px
      text-align: center
</style>
